<template>
  <div>
    <el-card>
      <div slot="header">
        <my-bread>素材管理</my-bread>
      </div>
      <!-- @change="changeCollect" 全部收藏切换自动获取获取-->
      <div class="btn-nav">
        <el-radio-group
          @change="changeCollect"
          v-model="reqParams.collect"
          size="small"
        >
          <el-radio-button :label="false">全部</el-radio-button>
          <el-radio-button :label="true">收藏</el-radio-button>
        </el-radio-group>
        <!-- 设置点击事件弹出兑换框 -->
        <el-button
          @click="openDialog()"
          style="float:right"
          type="success"
          size="small"
          >添加素材</el-button
        >
      </div>
      <!-- 图片列表 -->
      <div class="img-list">
        <div class="img-item" v-for="item in images" :key="item.id">
          <img :src="item.url" alt="" />
          <div class="img-option">
            <!-- 添加收藏/取消收藏 @click="toCollection"  -->
            <!--根据当前状态加颜色 :class="{ red: item.is_collected }" -->
            <span
              @click="toCollection(item)"
              :class="{ red: item.is_collected }"
              class="el-icon-star-off"
            >
            </span>
            <!-- 删除图片 -->
            <span @click="dleimag(item.id)" class="el-icon-delete"></span>
          </div>
        </div>
      </div>
    </el-card>
    <!-- 分页 -->
    <!-- hide-on-single-page   剩余一页隐藏分页 -->
    <!-- @current-change="currentpage"   获取当前点击页码  -->
    <!-- :page-size="reqParams.per_page" 每页显示条数 -->
    <!-- :current-page="reqParams.page" 当前页码 -->
    <el-pagination
      hide-on-single-page
      background
      @current-change="currentpage"
      layout="prev, pager, next"
      :total="total"
      :page-size="reqParams.per_page"
      :current-page="reqParams.page"
      style="margin-top: 15px"
    >
    </el-pagination>
    <!-- 对话框  :before-close="handleClose" -->
    <el-dialog title="添加图片" :visible.sync="dialogVisible" width="300px">
      <!-- 上传图片 -->
      <el-upload
        class="avatar-uploader"
        action="http://ttapi.research.itcast.cn/mp/v1_0/user/images"
        :show-file-list="false"
        name="image"
        :headers="headers"
        :on-success="handleAvatarSuccess"
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </el-dialog>
  </div>
</template>

<script>
// 导入token
import auth from "@/utils/auth";
export default {
  data() {
    return {
      reqParams: {
        //   默认查询全部页面
        collect: false,
        // 当前页码
        page: 1,
        // 每页条数
        per_page: 2
      },
      // 存储图片
      images: [],
      // 总条数
      total: 0,
      //  对话框开关
      dialogVisible: false,
      // 获取图片参数
      image: [],
      // 上传图片配置请求头 token
      headers: {
        Authorization: `Bearer ${auth.getUser().token}`
      },
      // 接收成功地址
      imageUrl: null
    };
  },
  created() {
    // 获取信息刷新
    this.getImage();
  },

  methods: {
    //  素材上传成功后执行
    handleAvatarSuccess(res) {
      console.log(res);
      //  成功提示
      this.$message.success("上传成功");
      // 赋值图片路径
      this.imageUrl = res.data.url;
      window.setTimeout(() => {
        // 上传成功后自动给关闭
        this.dialogVisible = false;
        //  刷新页面、、
        this.getImage();
      }, 3000);
    },
    // 添加图片素材
    openDialog() {
      this.dialogVisible = true;
    },
    // 删除图片
    dleimag(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          await this.$http.delete(`/user/images/${id}`);
          this.$message.success("删除成功");
          // 获取信息刷新
          this.getImage();
        })
        .catch(() => {
          this.$message.error("删除失败");
        });
    },

    // 收藏/取消收藏
    // 1、设置点击事件 带有对象属性
    async toCollection(item) {
      // 监听事件行为
      try {
        // 触发修改事件
        const {
          data: { data }
        } = await this.$http.put(`/user/images/${item.id}`, {
          collect: !item.is_collected
        });
        // 三元表达式判断  "收藏成功" : "取消成功"
        this.$message.success(data.collect ? "收藏成功" : "取消成功");
        // 根据切换值 改变收藏状态
        item.is_collected = data.collect;
      } catch (e) {
        this.$message.error(
          item.is_collected ? "取消收藏失败" : "添加收藏失败"
        );
      }
    },

    // 切换全部和收藏
    changeCollect() {
      // 触发事件返回第一条切换状态
      this.reqParams.page = 1;
      // 页面刷新
      this.getImage();
    },
    //   分页点击获取当前页码
    currentpage(newPage) {
      console.log(newPage);
      this.reqParams.page = newPage;
      this.getImage();
    },

    //   获取图片
    async getImage() {
      const {
        data: { data }
      } = await this.$http.get("/user/images", {
        params: this.reqParams
      });
      //   设置图片
      console.log(data);
      //   console.log(res);
      this.images = data.results;

      this.total = data.total_count;
    }
  }
};
</script>
<style lang="less" scoped>
.img-list {
  margin-bottom: 20px;
  .img-item {
    width: 180px;
    height: 180px;
    border: 1px dashed #dddddd;
    display: inline-block;
    margin-top: 20px;
    margin-right: 60px;
    position: relative;
    img {
      width: 100%;
      height: 100%;

      display: block;
    }
    .img-option {
      width: 100%;
      height: 30px;
      background: rgba(0, 0, 0, 0.3);
      line-height: 30px;
      position: absolute;
      left: 0;
      bottom: 0;
      text-align: center;
      span {
        color: #ffff;
        margin: 0 30px;
        &.red {
          color: red;
        }
      }
    }
  }
}
</style>
